<!--
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
-->

<template>
  <div class="new-storage-container">
    <p>{{ $t('storagePage.alias') }}:{{ alias }}</p>
    <el-form ref="formRef" :model="form" :rules="rules" class="source-form" label-position="top">
      <el-form-item :label="$t('storagePage.groupName')" prop="groupName" class="form-input-item require-style">
        <el-input :disabled="router.currentRoute.value.params.groupname" v-model="form.groupName" :placeholder="$t('storagePage.groupNamePlaceholder')">
          <template #prepend>root.</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('storagePage.groupDescription')" prop="description" class="form-input-item">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item :label="$t('storagePage.ttl')" class="form-input-item" prop="ttl">
        <el-input v-model="form.ttl" min="0" max="9007199254740992" class="ttl-input"></el-input>
        <el-select v-model="form.ttiUnit" class="ttl-input unit" clearable placeholder="  ">
          <el-option :label="$t('storagePage.millsSecondLabel')" value="millisecond"> </el-option>
          <el-option :label="$t('storagePage.secondLabel')" value="second"> </el-option>
          <el-option :label="$t('storagePage.minuteLabel')" value="minute"> </el-option>
          <el-option :label="$t('storagePage.hourLabel')" value="hour"> </el-option>
          <el-option :label="$t('storagePage.dayLabel')" value="day"> </el-option>
          <el-option :label="$t('storagePage.weekLabel')" value="week"> </el-option>
          <el-option :label="$t('storagePage.monthLabel')" value="month"> </el-option>
          <el-option :label="$t('storagePage.yearLabel')" value="year"> </el-option>
        </el-select>
        <i class="tips">{{ $t('storagePage.tips') }}</i>
      </el-form-item>
    </el-form>
    <div class="submit-btns">
      <el-button @click="cancel()">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit()">{{ $t('common.submit') }}</el-button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted, ref, reactive, onActivated } from 'vue';
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import axios from '@/util/axios.js';

export default {
  name: 'NewStorages',
  props: ['func', 'data'],
  setup(props) {
    const { t } = useI18n();
    const router = useRouter();
    const route = useRoute();
    let formRef = ref(null);
    let alias = ref(null);
    const rules = reactive({
      groupName: [
        {
          required: true,
          message: () => {
            return t(`storagePage.groupNamePlaceholder`);
          },
          trigger: 'blur',
        },
        {
          pattern: /^[^.][a-zA-Z0-9_\u4e00-\u9fa5.]+$/,
          message: () => {
            return t(`sourcePage.newUserErrorTip`);
          },
          trigger: 'blur',
        },
        {
          min: 0,
          max: 255,
          message: () => {
            return t(`storagePage.groupNameLengthTips`);
          },
          trigger: 'blur',
        },
      ],
      description: [
        {
          required: false,
          min: 0,
          max: 100,
          message: () => {
            return t(`storagePage.descriptionLengthTips`);
          },
          trigger: 'blur',
        },
      ],
      ttl: [
        {
          required: false,
          pattern: /^[1-9]\d*$/,
          message: () => {
            return t(`sourcePage.ttlErrorTips`);
          },
          trigger: 'blur',
        },
      ],
    });
    let form = reactive({
      groupName: '',
      description: '',
      ttl: '',
      ttiUnit: '',
    });
    /**
     * cancel new storage
     */
    const cancel = () => {
      props.func.removeTab(props.data.id);
      // props.func.addTab(router.currentRoute.value.params.serverid + 'connection');
    };
    /**
     * get storage detail
     * serverid: connect id
     * groupname:storage name
     */
    const getGroupDetail = () => {
      axios.get(`/servers/${router.currentRoute.value.params.serverid}/storageGroups/${router.currentRoute.value.params.groupname}`, {}).then((res) => {
        if (res && res.code == 0) {
          form.groupName = res.data.groupName.split('').splice(5).join('');
          form.ttl = res.data.ttl;
          form.ttiUnit = res.data.ttiUnit;
          form.description = res.data.description;
          alias.value = res.data.alias;
        }
      });
    };
    /**
     * new/edit storage
     */
    const submit = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          if (form.ttl && form.ttl > 9007199254740992) {
            ElMessage.error(t('sourcePage.maxErrorTips'));
            return false;
          }
          if ((form.ttl && !form.ttiUnit) || (!form.ttl && form.ttiUnit)) {
            ElMessage.error(t('storagePage.ttlErrTips'));
            return false;
          }
          const reqObj = {
            groupName: 'root.' + form.groupName,
            description: form.description,
            ttl: form.ttl == '' || form.ttl == null ? null : +form.ttl,
            ttlUnit: form.ttiUnit || null,
          };
          axios.post(`/servers/${router.currentRoute.value.params.serverid}/storageGroups`, { ...reqObj }).then((res) => {
            if (res && res.code == 0) {
              ElMessage.success(t('sourcePage.newGroupSuccessLabel'));
              props.func.removeTab(props.data.id);
              props.func.updateTreeByIds([props.data.id]);
              props.func.expandByIds([props.data.id]);
              props.func.addTab(router.currentRoute.value.params.serverid + 'connectionroot.' + form.groupName + 'storageGroup');
            }
          });
        }
      });
    };
    /**
     * get souce alisa
     */
    const getServerName = () => {
      axios.get(`/servers/${router.currentRoute.value.params.serverid}`, {}).then((res) => {
        if (res && res.code == 0) {
          alias.value = res.data.alias;
        }
      });
    };
    onMounted(() => {
      if (router.currentRoute.value.params.groupname) {
        getGroupDetail();
      } else {
        getServerName();
      }
    });
    onActivated(() => {
      if (route.params.forceupdate) {
        form.groupName = null;
        form.ttl = null;
        form.ttiUnit = null;
        form.description = null;
      }
    });

    return {
      // t,
      formRef,
      rules,
      form,
      submit,
      cancel,
      alias,
      router,
    };
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElOption,
    ElButton,
  },
};
</script>

<style scoped lang="scss">
.new-storage-container {
  text-align: left;
  padding: 20px;
  .el-form {
    margin-top: 20px;
    .form-input-item {
      width: 450px;
    }
    .require-style {
      // margin-left: -11px;
    }
    .ttl-input {
      display: inline-block;
      width: 310px;
    }
    .unit {
      width: 130px;
      margin-left: 10px;
    }
    .tips {
      color: rgba(34, 34, 34, 0.4);
      font-size: 12px;
      position: absolute;
      top: 46px;
      left: 0;
    }
  }

  .submit-btns {
    text-align: center;
    margin-top: 35px;

    .el-button {
      width: 110px;
      // padding-left: 0 !important;
    }
  }
}
</style>
